<template>
  <div id="app">
    <Mheader />
    <Tab />
    <keep-alive>
      <transition :name="direction">
        <router-view v-if="$route.meta.keepAlive" class="appView"></router-view>
      </transition>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <player></player>
  </div>
</template>
<script>
import Mheader from "@/components/m-header/m-header";
import Tab from "@/components/tab/vant_tab";
import Player from "@/components/player/player";
export default {
  name: "App",
  data() {
    return {
      direction: "slide-right"
    };
  },
  watch: {
    $route(to, from) {
      const toDepth = to.path.split("/").length;
      const fromDepth = from.path.split("/").length;
      if (to.path == "/") {
        this.direction = "slide-right";
      } else if (from.path == "/") {
        this.direction = "slide-left";
      } else {
        this.direction = toDepth < fromDepth ? "slide-right" : "slide-left";
      }
    }
  },
  components: {
    Mheader,
    Tab,
    Player
  }
};
</script>
<style lang="less">
@import "./assets/less/reset.less";
.appView {
  // position: absolute;
  // width: 100%;
  transition: transform 0.3s ease-out;
}
.slide-left-enter {
  transform: translate(100%, 0);
}
.slide-left-leave-active {
  transform: translate(-100%, 0);
}
.slide-right-enter {
  transform: translate(-100%, 0);
}
.slide-right-leave-active {
  transform: translate(100%, 0);
}
#app {
  max-width: 750px;
  overflow-x: hidden;
}
body,
html {
  line-height: 1;
  font-family: "PingFang SC", "STHeitiSC-Light", "Helvetica-Light", arial,
    sans-serif, "Droid Sans Fallback";
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: @color-background;
  color: @color-text;
}
* {
  touch-action: none;
}
.dialog_themedark {
  background-color: #333;
  .van-dialog__cancel,
  .van-dialog__confirm {
    color: #fff;
    background-color: #323233;
  }
  .van-hairline--left {
    border-left: 1px solid rgba(0, 0, 0, 0.3);
  }
  .van-dialog__footer--buttons {
    border-top: 1px solid rgba(0, 0, 0, 0.3);
  }
  .van-button--large {
    height: 40px;
  }
}
</style>
